import React, { memo, useCallback, useState } from 'react'
import "@/assets/css/setting.scss";
import {
    setUserDepart,
    employeeOut
} from "@/utils/dataUtil";

import { Popup, Toast } from 'antd-mobile'

import { delSaveUserInfo } from "@/utils/storageUtil"
import RevokeCountdown from "@/components/RevokeCountdown";

function ExitCompany(props) {

    //退出该企业的popup是否展示
    const [visibleExit, setVisibleExit] = useState(false);
    const [visibleRevoke, setVisibleRevoke] = useState(false);
    //是否可点击取消授权确定按钮
    const [isClickRevoke, setIsClickRevoke] = useState(false);
    const [visibleRevoked, setVisibleRevoked] = useState(false);

    //点击退出企业按钮
    const clickExitBtn = () => {
        setVisibleExit(true);
    }

    //点击退出企业取消按钮
    const clickExitBtnCancel = () => {
        //点击取消按钮
        setVisibleExit(false);
    };

    //点击退出企业网确定按钮
    const clickExitBtnFix = () => {
        //点击确定按钮
        setVisibleExit(false);
        setUserDepart().then(res => {
            if (res.status === 0) {
                Toast.show({
                    content: res.msg,
                    maskClickable: false,
                });
                return;
            }
            delSaveUserInfo();
            const u = navigator.userAgent;
            try {
                if ((u.indexOf('Android') > -1 || u.indexOf('Linux')) > -1) {
                    window.company.jumpToMyTab();
                } else if (u.indexOf('iPhone') > -1) {
                    window.webkit.messageHandlers.jumpToMyTab.postMessage(null);
                }
            } catch (err) {
                console.log("throw an exception! maybe is not real mobile,error: " + err);
            }
        })
    }

    //点击撤销按钮
    const clickRevokeBtn = () => {
        setIsClickRevoke(false);
        setVisibleRevoke(true);
    }

    //撤销授权
    const clickRevokeBtnFix = () => {
        //显示
        if (!isClickRevoke) {
            return;
        }
        //点击确认然后隐藏自己，打开二次确认
        setVisibleRevoke(false);
        setVisibleRevoked(true);
    };

    //二次确认消息
    const clickRevokedBtnFix = () => {
        employeeOut().then(res => {
            if (res.status === 1) {
                delSaveUserInfo();
                const u = navigator.userAgent;
                try {
                    if ((u.indexOf('Android') > -1 || u.indexOf('Linux')) > -1) {
                        window.company.jumpToMyTab();
                    } else if (u.indexOf('iPhone') > -1) {
                        window.webkit.messageHandlers.jumpToMyTab.postMessage(null);
                    }
                } catch (err) {
                    console.log("throw an exception! maybe is not real mobile,error: " + err);
                }
            }
        })
    };

    //倒计时回掉
    const revokeCallback = useCallback(
        (finish) => {
            setIsClickRevoke(finish);
        },
        [isClickRevoke]
    );

    return (
        <>
            <div className={props.type === "main" ? 'hosFootBtnBox' : 'exitBtnBox'}>
                {/* 退出按钮 */}
                <div className={props.type === "main" ? 'hosFootExitBtn' : 'exitBtn'} onClick={clickExitBtn}> 退出该企业</div>

                {/* 撤回按钮 */}
                < div className={props.type === "main" ? 'hosFootRevokeBtn' : 'exitBtnTxt'} onClick={clickRevokeBtn}> 撤回企业授权（即注销账号）</div>
            </div>

            {/* 退出的弹出层 */}
            <Popup
                visible={visibleExit}
                onMaskClick={() => {
                    setVisibleExit(false);
                }}
                bodyStyle={{
                    borderTopLeftRadius: "23px",
                    borderTopRightRadius: "23px",
                    height: "4.28rem",
                }}
            >
                <div className="setExitPopupTit">退出企业</div>

                <div className="setExitPopupTxt">
                    退出企业后，该模块的数据将会被删除，确定退出吗？
                </div>

                <div className="setExitBtnBox">
                    <div className="setExitBtnCancel" onClick={clickExitBtnCancel}>
                        取消
                    </div>
                    <div className="setExitBtnFix" onClick={clickExitBtnFix}>
                        确定
                    </div>
                </div>
            </Popup>


            {/* 撤回的弹出层 */}

            <Popup
                visible={visibleRevoke}
                onMaskClick={() => {
                    setVisibleRevoke(false);
                }}
                bodyStyle={{
                    borderTopLeftRadius: "23px",
                    borderTopRightRadius: "23px",
                    height: "4.7rem",
                }}
            >
                <div className="setExitPopupTit">注销账号</div>

                <div className="setExitPopupTxt">
                    注销账号后，你将退出该企业，该账号无法使用且无法恢复，账号下该模块的所有数据也将被删除。确认注销吗？
                </div>

                <div className="setExitBtnBox">
                    <div
                        className="setExitBtnCancel"
                        onClick={() => setVisibleRevoke(false)}
                    >
                        取消
                    </div>
                    <div className="setExitBtnFix" onClick={clickRevokeBtnFix}>
                        确定
                        <RevokeCountdown
                            count={10}
                            enable={visibleRevoke}
                            revokeCallback={revokeCallback}
                        />
                    </div>
                </div>
            </Popup>


            <Popup
                visible={visibleRevoked}
                onMaskClick={() => {
                    setVisibleRevoked(false);
                }}
                bodyStyle={{
                    borderTopLeftRadius: "23px",
                    borderTopRightRadius: "23px",
                    height: "4.1rem",
                }}
            >
                <div className="setExitPopupTxt setExitPopupTxted">
                    将在30天内注销账号并删除所有数据，在此期间内如果想要取消，请联系企业。
                </div>

                <div className="setExitBtnBox">
                    <div
                        className="setExitBtnFix setExitBtnFixed"
                        onClick={clickRevokedBtnFix}
                    >
                        我知道了
                    </div>
                </div>
            </Popup>
        </>
    )
}

export default memo(ExitCompany)
